<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>结算中心</title>
    <link rel="stylesheet" href="./css/settlement.css">
</head>

<body>
    <nav>
        <div class="nav-content">
            <div class="logo">
                <img src="./img/登录/set.png" alt="">
            </div>
            <div class="nav-msg">
                <div class="nav-msg-1">legochina.cn</div>
                <div class="nav-msg-2">欢迎光临<span class="nav-span">乐购</span>，请&nbsp;<span
                        class="nav-login">登录\</span><span class="nav-span nav-regist">注册</span>
                </div>
            </div>
        </div>
    </nav>
    <header>
        <div class="header">
            <div class="search">
                <input type="text" placeholder="设计中的设计 原研裁">
                <img src="./img/登录/search.png" alt="">
            </div>
        </div>
    </header>
    <main>
        <div class="main-box">
            <div class="msg-1">填写并核对订单信息</div>
            <div class="box">
                <div class="msg-2">收货人信息</div>
                <div class="msg-3">新增收货地址</div>
            </div>
            <div class="box-2">
                <div class="msg-4">
                    运送&nbsp;四川
                    <span>√</span>
                </div>
                <div class="msg-5">成都市&nbsp;&nbsp;高新区&nbsp;&nbsp;天府新谷11号楼1101</div>
                <div class="msg-6">收货人&nbsp;&nbsp;X某某</div>
                <div class="msg-7">联系电话136******88</div>
                <div class="msg-8">默认收货地址</div>
            </div>
            <div class="box-3">
                <div class="msg-9">更多收货地址：</div>
                <div class="box-4">
                    <div class="msg-10">运送&nbsp;四川</div>
                    <div class="msg-11">成都市&nbsp;&nbsp;青羊区&nbsp;&nbsp;天府广场11号楼1101</div>
                    <div class="msg-12">收货人&nbsp;&nbsp;X某某</div>
                    <div class="msg-13">联系电话136******88</div>
                    <div class="msg-14">+</div>
                </div>
            </div>
            <div class="box-5">支付方式</div>
            <div class="box-6">
                <div class="msg-15">
                    货到付款
                    <span>√</span>
                </div>
                <div class="msg-16">微信支付</div>
                <div class="msg-17">信用卡</div>
                <div class="msg-18">银行卡</div>
                <div class="msg-19">更多>></div>
            </div>
            <div class="box-7">
                <div class="msg-2">送货清单</div>
                <div class="msg-3">价格说明</div>
            </div>
            <div class="box-8">
                <div class="box-8-left">
                    <div class="box1">配送方式：</div>
                    <div class="box2">顺丰快递<span>√</span></div>
                    <div class="box3">
                        <div class="box3-1">付款方式：现金</div>
                        <div class="box3-2">修改</div>
                    </div>
                    <div class="box4">
                        <div class="box3-1">配送时间：<span>预计8月30日12:00-16:00送达</span></div>
                        <div class="box3-2">修改</div>
                    </div>
                </div>
                <div class="box-8-right">
                    <img src="./img/书籍/23353342-1_l.jpg" alt="">
                    <div class="name">从你的全世界路过</div>
                    <div class="price"></div>
                    <div class="num"></div>
                    <div class="status">有货</div>
                </div>
            </div>
            <div class="box-9">
                <div class="box5">发票信息：</div>
                <div class="box6">
                    <div class="box6-msg1">普通发票（电子）</div>
                    <div class="box6-msg2">个人&nbsp;&nbsp;明细&nbsp;&nbsp;<span>修改</span></div>
                </div>
            </div>
            <div class="box-10">
                <div class="msg1"></div>
                <div class="msg2"></div>
                <div class="msg3">运费：<span>6.00</span></div>
                <div class="msg4"></div>
            </div>
            <div class="box-13">
                <div class="box-11">
                    <div class="msg5">配送至</div>
                    <div class="box-12">成都高新区三环内天赋新谷11号1101</div>
                </div>
                <button class="submit">提交订单</button>
            </div>
            <!-- 立即支付弹窗 -->
            <div id="payModal" class="modal">
                <div class="modal-content">
                    <div class="content-top">
                        <div class="sure">确认付款</div>
                        <span class="close">&times;</span>
                    </div>
                    <div class="content-main">
                        <img src="./img/登录/!.png" alt="">
                        <p>是否去确认提交订单？</p>
                    </div>
                    <div class="content-footer">
                        <button id="cancelPay" class="cancelPay">取消</button>
                        <button id="confirmPay" class="confirmPay">确认支付</button>
                    </div>
                </div>
            </div>
            <div class="advertise">
                <img src="./img/购物车/广告.png" alt="" style="width: 1200px; height: 90px;">
            </div>
        </div>
    </main>

    <footer>
        <div class="foot-descri">
            <div class="foot-image">
                <img src="./img/goodsDetail/222_11.png" alt="">
                <img src="./img/goodsDetail/222_13.png" alt="">
                <img src="./img/goodsDetail/222_15.png" alt="">
                <img src="./img/goodsDetail/222_17.png" alt="">
            </div>
        </div>
        <div class="footer-content">
            <div class="foot-center">
                <div class="content-logo">
                    <div class="foot-guide">
                        <div class="guide-content">
                            <span class="h4">购物指南</span>
                            <span>购物流程</span>
                            <span>发票制度</span>
                            <span>账户管理</span>
                            <span>会员优惠</span>
                        </div>
                        <div class="guide-content">
                            <span class="h4">支付方式</span>
                            <span>货到付款</span>
                            <span>网上支付</span>
                            <span>礼品卡支付</span>
                            <span>银行卡转账</span>
                        </div>
                        <div class="guide-content">
                            <span class="h4">订单服务</span>
                            <span>订单配送查询</span>
                            <span>订单状态说明</span>
                            <span>自助取消订单</span>
                            <span>自助修改订单</span>
                        </div>
                        <div class="guide-content">
                            <span class="h4">退换货</span>
                            <span>退换货政策</span>
                            <span>自助申请退换货</span>
                            <span>退换货进度查询</span>
                            <span>退款方式和时间</span>
                        </div>
                        <div class="guide-content1">
                            <span class="h4">商家服务</span>
                            <span>商家中心</span>
                            <span>运营服务</span>
                            <span>加入尾品汇</span>
                        </div>
                    </div>
                    <div class="foot-logo">
                        <img src="./img/goodsDetail/logo_00.png" alt="">
                    </div>
                </div>
            </div>

            <div class="foot">
                <div class="line1">
                    <span>公司简介</span>
                    <span>|</span>
                    <span>Investor Relations</span>
                    <span>|</span>
                    <span>网站联盟</span>
                    <span>|</span>
                    <span>乐购招商</span>
                    <span>|</span>
                    <span>机构销售</span>
                    <span>|</span>
                    <span>手机乐购</span>
                    <span>|</span>
                    <span>官方Blog</span>
                    <span>|</span>
                    <span>热词搜索</span>
                </div><br>

                <div class="line2">
                    <span>Copyright (C)
                        乐购网 2004-2016，
                        All Rights Reserved
                    </span>
                </div>
            </div>
        </div>
    </footer>
    <script src="./js/settlement.js"></script>
</body>

</html>